Плагин позволяет, в некоторой степени, настроить поведения Полезных картинок и Дропзон.
Например, что дропзона реагирует только на полезные картинки с определенной "Меткой", а не на все подряд.
Или что дропзона отрабатывает только один раз...или что после попадания полезной картинки на дропзону, ее уже нельзя перемещать.
Вышенаписанное (и то, что будет ниже) - дефолтные возможности.
С учетом того, что в Общем событии (после клика на картинку, например), можно командами скрипта поменять ее же настройки...Вариантов
поведения, возможно, гораздо больше.
Настройка при создании:
Пример настройки для создания Полезной картинки:
Код:
let picSettings = {
id: 1,
mark: 'JS',
isHoverable: true,
onHoverCommonEventId: 32,
isClickableLeft: true,
onLeftClickCommonEventId: 33,
isMovable: true,
moveSpeed: 60,
onDropzoneCommonEventId: 37
}
DKR.UsefulPictures.createUsefulPic(picSettings);
id - номер картинки.
mark - текст в кавычках; метка, что бы активировать реацию Дропзоны на эту картинку (если у Дропзоны другая метка, то она не реагирует!).
isHoverable - true / false (да или нет); будет ли вызвано Общее событие при наведении курсора мыши на картинку.
onHoverCommonEventId - номер Общего события; если isHoverable: true, то вызывает это Общее событие.
isClickableLeft - true / false (да или нет); будет ли при клике ЛКМ вызвано Общее событие.
onLeftClickCommonEventId - номер Общего события; если isClickableLeft: true, то вызывает это Общее событие.
isMovable - true / false (да или нет); будет ли двигаться картинка при кликах ЛКМ.
moveSpeed - число скорости движения; если isMovable: true, то картинка двигается с указанной скоростью.
onDropzoneCommonEventId - номер Общего события, вызываемого при помещении данной картинки на подходящую Дропзону.
То есть, можно сделать картинки:
а) Только ховер.
б) Только клик.
в) Только перемещение.
г) Комбинация вышеуказанных вариантов.
д) Плюс вызывать Общее событие, прописанное в этой конкретной картинке (вместе / кроме события на Дропзоне)...или не вызвать.
Пример настройки для создания Дропзоны картинки:
Код:
let dropzoneSettings = {
id: 1,
mark: 'RPGMAKER',
dropState: 'active'
dropType: 'free'
dropAfter: 'work'
onDropCommonEventId: 35
}
DKR.UsefulPictures.createDropZone(dropzoneSettings);
id - номер картинки.
mark - текст в кавычках; метка, что бы активировать реацию дропзоны на попавшую в нее картинку (если у Полезной картинки другая метка, то дропзона не реагирует!).
dropState - 'active' или 'sleep'; текущее состояние дропзоны, 'active' - работае или 'sleep' - не работает (ЛУЧШЕ СРАЗУ ПИСАТЬ 'active', т.к. это поле внутренне!)
dropType - 'free' или 'lock'; действие дропзоны на картинку, после попадания последней в дропзону, 'free' - картинку можно перемещать или 'lock' - картинку больше перемещать нельзя.
dropAfter - 'work' или 'off'; изменение состояние дропзоны после попадания картинки, 'work' - дропзона остается рабочей или 'off' - дропзона больше не функционирует.
То есть, можно сделать дропзоны:
а) Блокирующие картинку после попадания на нее (или не блокирующие).
б) Выключающиеся после приема первой картинки (или принимающие много картинок).
в) Вызывающие Общее событие (или не вызывающие).
г) Также можно сделать дропзону, не активную после создания (и когда нужно, dropState сделать 'active').
Изменение настроек после создания:
Все вышеуказанные настройки можно менять вызовом скриптов.
DKR.UsefulPictures.updateUsefulPic(usefulPicId, listOfSettingsToUpdate) - для Полезных картинок.
DKR.UsefulPictures.updateDropZone(dropzoneId, listOfSettingsToUpdate) - для Дропзон.
usefulPicId и dropzoneId - номер картинки, выполняющей роль Полезной картинки или Дропзоны.
listOfSettingsToUpdate - массив настроек в формате [ ['имя настройки', 'новое значение'], ... , ['имя настройкиN', 'новое значениеN'] ]
Например для Полезной картинки(из демки):
Код:
DKR.UsefulPictures.updateUsefulPic(11, [
['isHoverable', true], ['onHoverCommonEventId', 32]
]);
...тут мы включаем ховер над картинкой №11 и задаем Общее событие, что будет вызываться при ховере.
Например для Дропзоны(из демки):
Код:
DKR.UsefulPictures.updateDropZone(45, [
['dropType', 'lock']
]);
...тут мы меняем тип реакции дропозны (сама дропзона - картинка под номером 45).
Обратите внимание, т.к. в полезной картинке у нас написано mark: 'JS', а в дропзоне mark: 'RPGMAKER', то перемещение такой картинки в такую дропзону
не активирует событий ни в картинке, ни в дропзоне! mark (метка) должно совападать.
Поменять это можно в полезной картинке, или дропзоне, указав для изменения: ['mark', 'JS' (меняем в дропзоне) или 'RPGMAKER' (меняем в картинке)]
Удаление:
Удалить полезную картинку или дропзону можно командами:
DKR.UsefulPictures.deleteUsefulPic(usefulPicId); - для полезной картинки.
DKR.UsefulPictures.deleteDropZone(dropzoneId); - для дропзоны.
Удаление картинки командой мейкера НЕ УДАЛИТ ее из настроек плагина!
Социальные закладки